<template>
  <div class="app-container">
    <el-card class="box-card" style="width: 50%; margin: auto">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <el-form :ref="formName" :rules="rules" :model="user">
        <el-form-item  label="用户头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            name="file"
            :action="imageAction"
            :show-file-list="false"
            :headers="headers"
            :on-success="handleImageSuccess"
            :before-upload="beforeImageUpload">
            <img v-if="img_src" :src="img_src" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户昵称" prop="name">
          <el-input v-model.trim="user.name" />
        </el-form-item>

        <el-form-item label="用户密码" prop="password">
          <el-input v-model.trim="user.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="fr" @click="submit">更 新</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
 import {
    updateByUsername
  } from '@/api/user'
export default {
  name: 'Profile',
  data() {
    return {
      formName: 'user',
      user: {},
      img_src:null,
      activeTab: 'account',
      headers: {
        token: this.token
      },

      imageAction: process.env.VUE_APP_BASE_API + '/backend_upload',
      rules: {
        name: [
          { required: true, message: '请输入用户', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
        ],
        a: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([

      'name',
      'avatar',
      'email',
      'token',
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name:this.name,
        password: this.password,
        avatar: this.avatar
      }
      this.img_src = this.avatar;
      console.log(this.user)
      this.headers.token = this.token
    },
    submit() {
      console.log(this.user)
      this.$refs['user'].validate(valid => {
        if (valid) {
        updateByUsername(this.user).then(response => {
            /* store.dispatch('user/getInfo').then(response => {
               const { roles, permissions } = response
               store.dispatch('permission/generateRoutes', [roles, permissions]).then(r => {})
            }) */
            this.$message.success(response.msg)
             if(response.code==200){
              this.$store.dispatch('user/logout');
              this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            }
          })
        }
      })
    },
    handleImageSuccess(response, file, fileList) {
      this.img_src=response.data.path
      this.user.avatar = response.data.attach_id.id
    },
    beforeImageUpload(file) {
      const image = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif'
      if (!image) {
        this.$message.error('只支持 jpg/jpeg/png/gif 格式!')
      }
      let isLtSize = false
      isLtSize = file.size / 1024 / 1024 < 5
      if (!isLtSize) {
        this.$message.error('最大支持 5MB!')
      }
      return image && isLtSize
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
